<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            width: 500px;
            height: 400px;
            border: springgreen 1px solid;
        }

        .outer .user-inp {
            outline: none;
            /* border:#ccc 1px solid; */
            /* display: inline;
            width: 400px;
            height: 50px; */
            box-sizing: border-box;
        }

        .user-list li {
            background-color: rgb(216, 211, 211);
            list-style: none;
            margin-bottom: 5px;

        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 最外层容器 -->
    <div class="outer">
        <!-- 输入留言容器 -->
        <div class="inp">
            <input type="text" class="user-inp">
            <button class="user-btn">提交</button>
        </div>
        <!-- 留言列表 -->
        <ul class="user-list">
        </ul>
    </div>
    <script>
        //点击提交按钮，将留言内容追加到ul之前
        //获取按钮
        var userBtn = document.querySelector('.user-btn');
        userBtn.onclick = function () {
            //获取到文本内容
            var userInp = document.querySelector('.user-inp');
            if (userInp.value == '') {
                alert('您没有输入内容');
                return;
            } else {
                var userMsg = userInp.value + "<a href='javascript:;'>删除</a>";
               
                //创建li
                var newLi = document.createElement('li');
                newLi.innerHTML = userMsg;
                //将li添加到ul中
                var userList = document.querySelector('.user-list');
                userList.insertBefore(newLi, userList.children[0]);
                //清空input框
                userInp.value = '';

                 // 在添加留言的时候就添加删除链接，然后在留言追加完毕之后给链接添加事件
                 //删除留言
                var userList = document.querySelector('.user-list');
                var aAll = userList.querySelectorAll('a');
                console.log(aAll);
                for (var i = 0; i < aAll.length; i++) {
                    aAll[i].onclick = function () { 
                        userList.removeChild(this.parentNode);
                    }
                }
            }
        }


    </script>
</body>

</html>